<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Demo II</title>
    <script src="../../jquery.min.js"></script>
</head>
<body>

    <div>
        <h2>猜数字游戏</h2>
        <p>玩家输入一个 1-10 的数字：<input id="input_num" type="text"></p>
        <input type="button" value=" 查看结果 " onclick="selectResultJq()">
        <div id="result_div"></div>
    </div>

    <p><img id="img_logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></p>

    <input onclick="upImg()" type="button" value=" 更换图片 ">

    <hr>
    <input type="button" value=" 添 加 " onclick="add('zhangsan','123')">&nbsp;&nbsp;&nbsp;
    <input type="button" value=" 修 改 " onclick="up('张三','123')">&nbsp;&nbsp;&nbsp;
    <input type="button" value=" 删 除 ">&nbsp;&nbsp;&nbsp;
    <input type="button" value=" 查 询 ">&nbsp;&nbsp;&nbsp;


    <script>
        //jquery 猜数字游戏
        function selectResultJq() {
            //产生随机数
            var randomNum = Math.floor((Math.random()*10))+1;
            var userInputNum = jQuery("#input_num").val();
            //alert(userInputNum);
            var msg;
            if(randomNum==userInputNum) {
                msg="<h4>恭喜：猜对了</h4>";
            }else {
                msg="<h4>抱歉：猜错了，正确的数字是："+randomNum+"</h4>";
            }
            jQuery("#result_div").html(msg);
        }
        //原生版本猜数字
        function selectResult() {
            //产生随机数
            var randomNum = Math.floor((Math.random()*10))+1;
            var userInputNum = document.getElementById("input_num").value;
            var msg;
            if(randomNum==userInputNum) {
                msg="<h4>恭喜：猜对了</h4>";
            }else {
                msg="<h4>抱歉：猜错了，正确的数字是："+randomNum+"</h4>";
            }
            document.getElementById("result_div").innerHTML = msg;
        }
        function upImg() {
            var sg_img = "https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_880x280_06c7476.png";
            document.getElementById("img_logo").src = sg_img;
        }

        // var mimi = {
        //     name: "咪咪",
        //     type: "中华田园喵",
        //     miao: function () {
        //         console.log("喵");
        //     }
        // };
        // var xiaohei = {
        //     name: "小黑",
        //     type: "波斯喵",
        //     miao: function () {
        //         console.log("猫呜");
        //     }
        // }
        // var ciqiu = {
        //     name: "刺球",
        //     type: "金渐层",
        //     miao: function () {
        //         console.log("咕噜噜");
        //     }
        // }


        // var student = new Object();
        // student.id = 2;
        // student.name = "李四";
        // student.password = "456";
        // student.sayHello = function() {
        //     alert("Hello student");
        // }
        // console.log(student.name);
        // console.log(student['id']);
        // student.sayHello();

        // //字面量方式
        // var student = {
        //     id:1,
        //     name:"张三",
        //     password:"123",
        //     sayHi:function() {
        //         alert("hi student");
        //     }
        // };
        // // 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
        // console.log(student.name);
        // // 2. 使用 [ ] 访问属性, 此时属性需要加上引号
        // console,log(student['id']);
        // // 3. 调用方法, 别忘记加上 () 
        // student.sayHi();

        // if (1 < 2) {
        //     var a = 10;
        // }
        // console.log(a);


        // function test() {
        //     num = 100;
        // }
        // test();
        // console.log(num);


    //     // 全局变量
    //     var num = 10;
    //     console.log(num);
    //     function test() {
    //    // 局部变量
    //         var num = 20;
    //         console.log(num);
    //     }
    //     function test2() {
    //         // 局部变量
    //         num = 30;
    //         console.log(num);
    //     }
    //     test();
    //     test2();
    //     console.log(num);



        //修改方法
        function up() {
            alert("执行了修改方法！")
            //得到了所有的参数
            for(var item of arguments) {
                console.log(item);
            }
        }

        //alert("111");
        //添加方法
        function add(name,password) {
            alert("执行了添加方法! \n name="+name+"\n paaaword="+password);
            return "hello function";
        }

        //unsafe -> CAS
        // var functionName = prompt("输入方法名: ");
        // eval(functionName+"()");

        // var result = add();
        // console.log(result);
        // var arr = new Array();
        // arr.push(1);
        // arr.push("hello");
        // arr.push(false);

        // //删除
        // arr.splice(1,1);

        // //截取，不会改变原数组的结果
        // var obj = arr.slice(1,2);
        // console.log(obj);

        // console.log(arr[3]);
        // for(var i=0;i<5;i++) {
        //     console.log(i);
        // }

        // for(var item of arr) {
        //     console.log(item);
        // }
    </script>
    
</body>
</html>